<template>
	<view class="content">
		<view class="head">
			<u-navbar leftIcon="arrow-leftward" :rightText="editing? '完成' : '編輯' " @rightClick="rightClick"
				:placeholder='true' @leftClick="leftClick" title="收藏夾">
			</u-navbar>
		</view>
		<view class="main">
			<view class="nav">
				<view :class="['nav-item', { active: currentIndex === index }]" @click="changeTab(index)"
					v-for="(item,index) in navItems" :key="index">
					{{item}}
				</view>
			</view>
			<view style="padding-bottom: 144rpx;">
				<view class="goods-detail" v-for="(item,index) in collectionlist" :key="index" >
					<view class="detail-left">
						<view class="goods-left">
							<u-checkbox-group v-if="editing" @change="selected(item)">
								<label>
									<u-checkbox activeColor="#645AED" shape="circle" class="selected" color="#555555"
										:checked="item.checked" /><text></text>
								</label>
							</u-checkbox-group>
							<view class="goods-img" @click="$store.dispatch('toDetails',item.goods_id)">
								<image :src="getFirstImageLink(item.goods_images)" mode="widthFix" style="max-height: 90%;max-width: 90%"></image>
								<!-- <image :src="item.goodsImage" style="width: 150rpx;height: 140rpx;"></image> -->
							</view>
						</view>
						<view class="size">
							<view class="goods-title" @click="$store.dispatch('toDetails',item.goods_id)">{{item.goods_name}}</view>
							<view class="center">

							</view>
							<view class="bottom">
								<text class="goods-price">
<!--                  MOP {{item.shop_price}}-->
                </text>
								<view class="detail-right">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="end" v-if="editing">
			<view class="end-left">
				<u-checkbox-group @change="selectgoods()">
					<label style="display: flex;align-items: center;">
						<u-checkbox activeColor="#645AED" shape="circle" :checked="allchecked" />全選
					</label>
				</u-checkbox-group>

			</view>
			<view class="end-right">
				<view class="btn" @click="addquete">
					加入報價車
				</view>
				<view class="btn" @click="addcart">
					加入購物車
				</view>
				<view class="btn white" @click="cancelcollect">
					取消收藏
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mycollection,
		addquoteall,
		addcartall,
		colledel
	} from '@/network/api/user.js'
	export default {
		data() {
			return {
				navItems: ['首頁收藏', '我的商品收藏'],
				currentIndex: 0,
				page: 1,
				editing: false,
				show: true,
				allchecked: false,
				checked: true,
				collectionlist: []
			}
		},
		onShow() {
      this.page = 1;
      this.collectionlist = []
			this.getmycollection()
		},
		onReachBottom() {
			console.log('我到底了');
			// if (this.page < this.last_page) {
			// this.page += 1
			// this.getMycollect()
			// }
			this.page++
			this.getmycollection()
		},
		// 下拉刷新触发
		methods: {
			findCheckedItems(collectionlist) {
				return collectionlist.filter(item => item.checked === true);
			},
			isAnyItemSelected() {
				return this.collectionlist.some(item => item.checked);
			},
			//加入报价车
			async addquete() {
				if (!this.isAnyItemSelected()) {
					uni.showToast({
						title: "請至少選擇壹項商品",
						icon: "none"
					});
					return;
				}
				let items = this.findCheckedItems(this.collectionlist)
				const from = items.map(item => {
					return {
						collection_id: item.collection_id,
						createtime: item.createtime,
						goods_id: item.goods_id,
						cat_id: item.cat_id,
						goods_sn: item.goods_sn,
						goods_name: item.goods_name,
						shop_price: item.shop_price,
						promote_price: item.promote_price,
						goods_brief: item.goods_brief,
						goods_images: item.goods_images,
						goods_number: item.goods_number,
						num: item.num,
						personal_price: item.personal_price,
						goods_attr_id: item.goods_attr_id,
						goods_specification_id: item.goods_specification_id
					};
				});
				let data = {
					data: from
				}
				const res = await addquoteall(data)
				if (res.data.code == 1) {
					uni.showToast({
						title: "添加成功",
						icon: "none"
					});
				}
			},
			//加入购物车
			async addcart() {
				if (!this.isAnyItemSelected()) {
					uni.showToast({
						title: "請至少選擇壹項商品",
						icon: "none"
					});
					return;
				}
				let items = this.findCheckedItems(this.collectionlist)
				const from = items.map(item => {
					return {
						collection_id: item.collection_id,
						createtime: item.createtime,
						goods_id: item.goods_id,
						cat_id: item.cat_id,
						goods_sn: item.goods_sn,
						goods_name: item.goods_name,
						shop_price: item.shop_price,
						promote_price: item.promote_price,
						goods_brief: item.goods_brief,
						goods_images: item.goods_images,
						goods_number: item.goods_number,
						num: item.num,
						personal_price: item.personal_price,
						goods_attr_id: item.goods_attr_id,
						goods_specification_id: item.goods_specification_id
					};
				});
				let data = {
					data: from
				}
				const res = await addcartall(data)
				if (res.data.code == 1) {
					uni.showToast({
						title: "添加成功",
						icon: "none"
					});
				}
			},
			//取消收藏
			async cancelcollect() {
				if (!this.isAnyItemSelected()) {
					uni.showToast({
						title: "請至少選擇壹項商品",
						icon: "none"
					});
					return;
				}
				let item = this.findCheckedItems(this.collectionlist)
				let collection_id = item.map(item => item.collection_id)
				let data = {
					collection_id: collection_id
				}
				const res = await colledel(data)
				this.collectionlist = []
				console.log(res);
				this.page = 1
				this.getmycollection()
			},
			async getmycollection() {
				let data = {
					search: "",
					page: this.page,
					type: this.currentIndex + 1
				}
        // 转圈
        uni.showLoading({
          title: '加載中'
        })
				const res = await mycollection(data)
        uni.hideLoading()
				const newCollectionList = res.data.goods.data;
        if (newCollectionList.length == 0) {
          uni.showToast({
            title: '暫無更多數據',
            icon: 'none',
          })
        }
				// this.collectionlist = res.data.goods.data
				this.collectionlist = [...this.collectionlist, ...newCollectionList];
				this.collectionlist.forEach(item => {
					item.checked = false
				})
			},
			Tosubmit() {},
			changeTab(index) {
				this.currentIndex = index;
				this.collectionlist = []
				this.page = 1
				this.getmycollection()
				// 这里可以根据选项的索引值进行不同的处理，例如切换内容或显示不同的组件等
			},
			leftClick() {
				uni.switchTab({
					url: "/pages/mine/index"
				})
			},
			rightClick() {
				this.editing = !this.editing;
			},
			selected(item) {
				item.checked = !item.checked
				this.allchecked = this.collectionlist.every(item => item.checked)
			},
			selectgoods() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.collectionlist.map(item => {
						item.checked = true
					})
				} else {
					this.collectionlist.map(item => {
						item.checked = false
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f6f9;
	}

	.content {
		.main {
			.nav {
				background-color: white;
				height: 88rpx;
				line-height: 88rpx;
				display: flex;
				justify-content: space-around;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.active {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1F1F1F;
				border-bottom: 5rpx solid #645AED;
			}

			.goods {
				line-height: 80rpx;
				background-color: #FFFFFF;

				&-detail {
					display: flex;
					padding: 32rpx;
					// margin: 0 32rpx;
					background-color: #fff;
					justify-content: space-between;
					border-bottom: 1rpx solid #F1F1F1;
					align-items: center;

					.detail-left {
						display: flex;

						.goods-left {
							display: flex;
							align-items: center;

							.goods-img {
								margin-left: 24rpx;
								width: 180rpx;
								height: 180rpx;
								background: #FFFFFF;
								border: 1rpx solid #DEDEDE;
								border-radius: 30rpx;
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									width: 148rpx;
								}
							}
						}
					}

					.size {
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						margin-left: 30rpx;

						.center {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							margin-top: 8rpx;
						}

						.bottom {
							margin-top: 22rpx;
							display: flex;
							align-items: center;
							justify-content: space-between
						}

						.goods-title {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.goods-price {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #4949C3;
						}
					}

					.detail-right {
						.stepper {
							display: flex;
							// align-items: center;
							vertical-align: middle;

							.stepper-value {
								margin: 0 20rpx;
								font-size: 24rpx;
								line-height: 43rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #333333;
							}

							.stepper-btn {
								image {
									width: 44rpx;
									height: 44rpx;
								}
							}
						}

						text {
							width: 50rpx;
							line-height: 50rpx;
							text-align: center;
							display: inline-block;
							background-color: #F7F7F7;
							margin-right: 10rpx;
						}

						.add {
							color: #FA4305;
							border-radius: 10rpx 30rpx 30rpx 10rpx;
							margin-right: 20rpx;
						}

						.subtract {
							border-radius: 30rpx 10rpx 10rpx 30rpx;
						}
					}
				}
			}

		}

		.end {
			width: 100%;
			height: 110rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-left {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				display: flex;
				justify-content: space-between;
				padding: 0 30rpx;

				.end-flex {
					display: flex;
					align-items: center;
				}
			}

			&-right {
				margin-right: 32rpx;
				display: flex;

				.end-price {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;

				}

				.btn {
					margin-left: 20rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					line-height: 0rpx;
					color: #FFFFFF;
					width: 170rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #645AED;
					border-radius: 30rpx;
				}

				.white {
					color: #333333;
					background: #FFFFFF;
					border: 1px solid #CBCBCB;
				}

			}
		}

	}
</style>
